<template>
    <div class="yhcl w-100 h-100">
      <div
        class="item"
        v-for="item in list"
        :key="item.name"
        :style="{
          background: `url(${item.bg}) no-repeat center center`,
          backgroundSize: '100% auto',
        }"
      >
        <div class="value"><span>{{ item.value }}</span>个</div>
  
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import bg1 from "@/assets/image/underGround/glsb_1.png";
  import bg2 from "@/assets/image/underGround/glsb_2.png";
  import bg3 from "@/assets/image/underGround/glsb_3.png";
  import bg4 from "@/assets/image/underGround/glsb_4.png";
  const baseList = [
    { name: "照明设备", bg: bg1 },
    { name: "通风设备", bg: bg2 },
    { name: "消防设备", bg: bg3 },
    { name: '管网支架', bg: bg4}
  ];
  
  const list: any = ref([]);
  
  
  const jsonData: any = inject("jsonData");
  const current = computed(() => {
      
    let data = [];
    try {
      data = jsonData.value.underJsc.glsb
    } catch (error) {}
  
    return data;
  });
  watch(
    () => current.value,
    (val) => {
      if (val) {
        list.value = val.map((value: any, index: number) => ({
          value,
          ...baseList[index],
        }));
      }
    }
  );
  </script>
  
  <style lang="less" scoped>
  .yhcl {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    .item {
      height: 100%;
      flex: 1;
      margin: 0 28px;
      display: flex;
      flex-flow: column wrap;
      align-items: center;
      font-size: 24px;
    }
    .value {
      margin: 20px 0 180px;
      span{
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: bold;
        text-shadow: 0px 0px 3px #5CE1FF;
        font-size: 34px;
        letter-spacing: 4px;
      }
    }
   
  }
  </style>
  